$("li[role=presentation]").get().forEach(liDiv=>{ liDiv.style.removeProperty("flex-basis"); })
// Select the nav container
const nav = document.querySelector(".nav");

// Select all li items except the first one
const liItems = nav.querySelectorAll("li[role=presentation]");

for (let i = 1; i < liItems.length; i++) {
    const li = liItems[i];

    // Create a connector div
    const connector = document.createElement("div");
    connector.className = "connector";

    // Insert the connector before the current li
    li.parentNode.insertBefore(connector, li);
}

for (let i = 0; i < liItems.length; i++) {

	const li = liItems[i];
	li.style.setProperty('--after-content', `"${li.innerText}"`);
	
	li.querySelector("button").innerText = i+1;
}

function updatePreviousTabs() {

    document.querySelectorAll('li[role=presentation]').forEach(li => {
        if (!li.classList.contains('active')) {
    const link = li.querySelector("a[role=tab]");
    if (link) {
        link.style.setProperty("background-color", "#638e9f", "important"); // default
        link.style.setProperty("color", "#42676c", "important");            // default
    }

    // Select the next sibling if it's a connector
    const nextConnector = li.previousElementSibling;
    if (nextConnector && nextConnector.classList.contains("connector")) {
        nextConnector.style.setProperty("background-color", "#638e9f", "important"); // default
    }
}
    });

    // Select the active <li>
    const activeLi = document.querySelector("li[role=presentation].active");
    if (!activeLi) return;

    // Style the active tab
    const activeLink = activeLi.querySelector("a[role=tab]");

    if (activeLink) {
        activeLink.style.setProperty("background-color", "#242e32", "important");
        activeLink.style.setProperty("color", "white", "important");
    }
    if (activeLi.classList == "connector") {
        activeLi.style.setProperty("background-color", "#242e32", "important");
    }

    // Loop over previous siblings and apply active color
    let prevLi = activeLi.previousElementSibling;
    while (prevLi) {
        const link = prevLi.querySelector("a[role=tab]");
        if (link) {
            link.style.setProperty("background-color", "#242e32", "important");
            link.style.setProperty("color", "white", "important");
        }
        if (prevLi.classList == "connector") {
            prevLi.style.setProperty("background-color", "#242e32", "important");
        }
        prevLi = prevLi.previousElementSibling;
    }
}

// Observe changes in the nav container
const navv = document.querySelector('.nav');

const observer = new MutationObserver(() => {
  updatePreviousTabs();
});

// Watch for class changes in child <li> elements
observer.observe(navv, { subtree: true, attributes: true, attributeFilter: ['class'] });

// Run once initially
updatePreviousTabs();


$(".number-input input").get().forEach((input) => {

        input.style.direction = "ltr"
	input.addEventListener("input", (e) => {
	  // Save cursor position
	  let cursorPosition = input.selectionStart;

	  // Remove all non-digit characters
	  let value = input.value.replace(/\D/g, '');

	  // Format number with commas
	  let formattedValue = '';
	  if (value) {
		formattedValue = Number(value).toLocaleString();
	  }

	  // Update input value
	  input.value = formattedValue;

	  // Adjust cursor position
	  let diff = formattedValue.length - value.length;
	  input.selectionStart = input.selectionEnd = cursorPosition + diff;
	});
})










// Navbar Styles


.nav{ display: flex; align-items: center; padding: 25px 0;  background-color: #2b5d70;  display: flex;  justify-content: center;}
a[role=tab]{  border: none !important;  color: #42676c !important;  margin: 0 !important;  width: 80px !important;  height: 80px !important;  background-color: #638e9f !important;  border-radius: 50% !important;  display: flex !important;  justify-content: center !important;  align-items: center !important;}
li[role=presentation].active a{  color: white !important;  background-color: #242e32 !important; font-weight: normal !important;}
.connector{ margin-top: -25px; background-color: #638e9f !important;width: 80px; height: 5px;}
li[role=presentation]::after{  content: var(--after-content);    text-align: center;    height: 25px;    display: flex;    align-items: end;}
li[role=presentation]{ --after-content: 'Default';   display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}
li[role=presentation].active::after{   color:white;}
li[role=presentation].completedTab::after{   color:white;}